<template>
  <div style="padding: 5px;">
    <el-row :gutter="10">
      <el-col :span="1.5"><el-button>111</el-button></el-col>
      <!-- span为小数时占据列数不生效了 由包裹的内容自动撑开 视图缩小时会自动换行 很奇怪？？？？？很有意思！！！！-->
      <el-col :span="1.5"><el-button>111</el-button></el-col>
      <el-col :span="1.5"><el-button>111</el-button></el-col>
      <el-col :span="1.5"><el-button>111</el-button></el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%" :show-header="false">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="'1'"
            :inactive-value="'0'"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div style="margin-bottom: 5px">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </div>
          <div>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          status: "1",
          address: "上海市普陀区金沙江路 1518 弄",
          isCanDelete: true,
        },
        {
          date: "2016-05-04",
          status: "1",
          address: "上海市普陀区金沙江路 1517 弄",
          isCanDelete: false,
        },
        {
          date: "2016-05-01",
          status: "0",
          address: "上海市普陀区金沙江路 1519 弄",
          isCanDelete: true,
        },
        {
          date: "2016-05-03",
          status: "1",
          address: "上海市普陀区金沙江路 1516 弄",
          isCanDelete: false,
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>
<style scoped></style>
